<template>
  <div class="main-content-wrapper">
    <div class="home-layout">
      <!-- 左侧促销商品区域 -->
      <aside class="promotions-sidebar">
        <h3 class="sidebar-title">🔥 当季热卖</h3>
        <div class="promotions-scroll">
          <div class="promotion-items-grid">
            <div class="promotion-item" v-for="item in promotionItems" :key="item.id">
              <img :src="item.image" alt="item.name" class="promotion-img">
              <div class="promotion-info">
                <h4 class="promotion-name">{{ item.name }}</h4>
                <div class="promotion-price">¥{{ item.price }}</div>
                <div class="promotion-tag">{{ item.tag }}</div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      
      <!-- 主内容区域 -->
      <div class="home-container">
  <!-- 公告栏 -->
      <div class="announcement-bar">
        <div class="announcement-content">
          <span class="announcement-icon">📢</span>
          <span class="announcement-text">限时活动：新用户注册即送200元优惠券！</span>
        </div>
        <!-- 醒目的会员中心按钮 -->
        <router-link to="/membership" class="prominent-membership-btn">
          会员专享特权
        </router-link>
      </div>

      <!-- 轮播图区域 -->
      <div class="carousel">
        <div class="carousel-slides">
          <div class="carousel-slide" v-for="(slide, index) in carouselSlides" :key="index" :class="{ active: currentSlideIndex === index }">
            <img :src="slide.image" :alt="slide.title" class="carousel-img">
            <div class="carousel-caption">
              <h2>{{ slide.title }}</h2>
              <p>{{ slide.description }}</p>
            </div>
          </div>
        </div>
        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
          <button v-for="(slide, index) in carouselSlides" :key="index" :class="{ active: currentSlideIndex === index }" @click="goToSlide(index)"></button>
        </div>
        <!-- 轮播图控制按钮 -->
        <button class="carousel-control prev" @click="prevSlide">&lt;</button>
        <button class="carousel-control next" @click="nextSlide">&gt;</button>
      </div>

      <!-- 商品分类 -->
      <div class="categories">
        <h2 class="section-title">商品分类</h2>
        <div class="categories-grid">
          <div class="category-item">
            <img src="https://picsum.photos/seed/cat1/200/200" alt="电子产品">
            <span>电子产品</span>
          </div>
          <div class="category-item">
            <img src="https://picsum.photos/seed/cat2/200/200" alt="服装鞋帽">
            <span>服装鞋帽</span>
          </div>
          <div class="category-item">
            <img src="https://picsum.photos/seed/cat3/200/200" alt="家居用品">
            <span>家居用品</span>
          </div>
          <div class="category-item">
            <img src="https://picsum.photos/seed/cat4/200/200" alt="美妆个护">
            <span>美妆个护</span>
          </div>
        </div>
      </div>

      <!-- 热门商品 -->
      <div class="products">
        <h2 class="section-title">热门商品</h2>
        <div class="products-grid">
          <div class="product-card" v-for="product in products" :key="product.id">
            <img :src="product.image" alt="product.name" class="product-img">
            <h3 class="product-name">{{ product.name }}</h3>
            <div class="product-price">¥{{ product.price }}</div>
            <ClickEffect @click="addToCart(product)">
              <button class="add-to-cart">加入购物车</button>
            </ClickEffect>
          </div>
        </div>
      </div>

      <!-- 热门品牌 -->
      <div class="brands">
        <h2 class="section-title">热门品牌</h2>
        <div class="brands-grid">
          <div class="brand-item" v-for="brand in popularBrands" :key="brand.id">
            <img :src="brand.logo" alt="brand.name" class="brand-logo">
            <div class="brand-name">{{ brand.name }}</div>
          </div>
        </div>
      </div>

      <!-- 用户信息卡片 (如果已登录) -->
      <div v-if="currentUser" class="user-card">
        <h2 class="section-title">用户中心</h2>
        <div class="user-info">
          <img src="https://picsum.photos/seed/user/100/100" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <h3>欢迎回来，{{ currentUser.username }}</h3>
            <p>您的购物车中有 {{ cartItems }} 件商品</p>
            <p>您有 {{ orders }} 个待处理订单</p>
            <div style="display: flex; gap: 10px; margin-top: 10px;">
              <router-link to="/profile" class="profile-link">查看/编辑个人资料</router-link>
              <router-link to="/membership" class="membership-button">会员中心</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    </div>
    
    <!-- 右侧商品价格走势图区域 -->
    <div class="price-chart-sidebar">
      <h2 class="chart-title">价格走势</h2>
      <div class="chart-product-selector">
        <button 
          v-for="product in products.slice(0, 3)" 
          :key="product.id" 
          class="chart-product-option"
          :class="{ active: selectedProductId === product.id }"
          @click="selectProduct(product.id)"
        >
          {{ product.name }}
        </button>
      </div>
      <div class="mini-chart-container">
        <canvas id="priceChart"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入依赖
import { ref, onMounted, onUnmounted } from 'vue';
import { getCurrentUser } from '../services/auth';
import ClickEffect from '../components/ClickEffect.vue';

// 动态加载Chart.js
let Chart = null;
let priceChart = null;

// 用户信息刷新定时器
let refreshInterval = null;

// 为了在Vue中使用Chart.js，我们需要动态加载
onMounted(async () => {
  // 使用CDN加载Chart.js
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
  script.onload = () => {
    Chart = window.Chart;
    initPriceChart();
  };
  document.head.appendChild(script);

  // 检查用户登录状态
  currentUser.value = getCurrentUser();
  
  // 模拟购物车和订单数据
  if (currentUser.value) {
    cartItems.value = Math.floor(Math.random() * 10);
    orders.value = Math.floor(Math.random() * 5);
  }
  
  // 设置定期刷新用户信息的定时器（每5秒刷新一次）
  refreshInterval = setInterval(() => {
    const updatedUser = getCurrentUser();
    if (updatedUser && JSON.stringify(updatedUser) !== JSON.stringify(currentUser.value)) {
      currentUser.value = { ...updatedUser };
    }
  }, 5000);
  
  // 启动轮播图自动播放
  startSlideInterval();
});

// 添加到购物车方法
const addToCart = (product) => {
  // 这里可以实现实际的添加到购物车逻辑
  // 暂时使用alert提示
  alert(`已将${product.name}添加到购物车！`);
  
  // 更新购物车数量
  cartItems.value++;
};

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理用户信息刷新定时器
  if (refreshInterval) {
    clearInterval(refreshInterval);
    refreshInterval = null;
  }
  
  // 清理轮播图定时器
  if (slideInterval) {
    clearInterval(slideInterval);
    slideInterval = null;
  }
  
  // 清理图表实例
  if (priceChart) {
    priceChart.destroy();
  }
});

// 轮播图数据
const carouselSlides = ref([
  {
    image: 'https://picsum.photos/seed/banner1/1200/400',
    title: '夏季大促销',
    description: '全场商品低至5折'
  },
  {
    image: 'https://picsum.photos/seed/banner2/1200/400',
    title: '新品上市',
    description: '抢先体验最新科技产品'
  },
  {
    image: 'https://picsum.photos/seed/banner3/1200/400',
    title: '会员专享',
    description: '会员购物额外9折优惠'
  }
]);

// 当前轮播图索引
const currentSlideIndex = ref(0);
let slideInterval = null;

// 轮播图自动播放
const startSlideInterval = () => {
  // 清除已存在的定时器
  if (slideInterval) {
    clearInterval(slideInterval);
  }
  // 设置新的定时器，每5秒切换一次
  slideInterval = setInterval(() => {
    nextSlide();
  }, 5000);
};

// 切换到下一张轮播图
const nextSlide = () => {
  currentSlideIndex.value = (currentSlideIndex.value + 1) % carouselSlides.value.length;
};

// 切换到上一张轮播图
const prevSlide = () => {
  currentSlideIndex.value = (currentSlideIndex.value - 1 + carouselSlides.value.length) % carouselSlides.value.length;
};

// 切换到指定索引的轮播图
const goToSlide = (index) => {
  currentSlideIndex.value = index;
};

// 热门品牌数据
const popularBrands = ref([
  { id: 1, name: 'Apple', logo: 'https://picsum.photos/seed/brand1/120/60' },
  { id: 2, name: 'Samsung', logo: 'https://picsum.photos/seed/brand2/120/60' },
  { id: 3, name: 'Huawei', logo: 'https://picsum.photos/seed/brand3/120/60' },
  { id: 4, name: 'Xiaomi', logo: 'https://picsum.photos/seed/brand4/120/60' },
  { id: 5, name: 'Sony', logo: 'https://picsum.photos/seed/brand5/120/60' },
  { id: 6, name: 'Google', logo: 'https://picsum.photos/seed/brand6/120/60' }
]);

// 模拟商品数据
const products = ref([
  {
    id: 1,
    name: '时尚智能手机',
    price: 2999,
    image: 'https://picsum.photos/seed/product1/300/300'
  },
  {
    id: 2,
    name: '无线蓝牙耳机',
    price: 799,
    image: 'https://picsum.photos/seed/product2/300/300'
  },
  {
    id: 3,
    name: '轻薄笔记本电脑',
    price: 5999,
    image: 'https://picsum.photos/seed/product3/300/300'
  },
  {
    id: 4,
    name: '智能手表',
    price: 1299,
    image: 'https://picsum.photos/seed/product4/300/300'
  }
]);

// 模拟促销商品数据
const promotionItems = ref([
  {
    id: 101,
    name: '迷你风扇',
    price: 99,
    image: 'https://picsum.photos/seed/promo1/100/100',
    tag: '热销'
  },
  {
    id: 102,
    name: '防晒霜',
    price: 128,
    image: 'https://picsum.photos/seed/promo2/100/100',
    tag: '限时'
  },
  {
    id: 103,
    name: '夏季T恤',
    price: 159,
    image: 'https://picsum.photos/seed/promo3/100/100',
    tag: '折扣'
  },
  {
    id: 104,
    name: '驱蚊手环',
    price: 49,
    image: 'https://picsum.photos/seed/promo4/100/100',
    tag: '畅销'
  },
  {
    id: 105,
    name: '太阳镜',
    price: 199,
    image: 'https://picsum.photos/seed/promo5/100/100',
    tag: '新品'
  },
  {
    id: 106,
    name: '遮阳帽',
    price: 89,
    image: 'https://picsum.photos/seed/promo6/100/100',
    tag: '特惠'
  },
  {
    id: 107,
    name: '冰丝席',
    price: 299,
    image: 'https://picsum.photos/seed/promo7/100/100',
    tag: '热卖'
  },
  {
    id: 108,
    name: '便携水杯',
    price: 69,
    image: 'https://picsum.photos/seed/promo8/100/100',
    tag: '环保'
  },
  {
    id: 109,
    name: '沙滩拖鞋',
    price: 79,
    image: 'https://picsum.photos/seed/promo9/100/100',
    tag: '舒适'
  },
  {
    id: 110,
    name: '运动短裤',
    price: 149,
    image: 'https://picsum.photos/seed/promo10/100/100',
    tag: '透气'
  },
  {
    id: 111,
    name: '止汗露',
    price: 59,
    image: 'https://picsum.photos/seed/promo11/100/100',
    tag: '清爽'
  },
  {    id: 112,
    name: '泳衣',
    price: 259,
    image: 'https://picsum.photos/seed/promo12/100/100',
    tag: '时尚'
  },
  {
    id: 113,
    name: '便携小风扇',
    price: 59,
    image: 'https://picsum.photos/seed/promo13/100/100',
    tag: '清凉'
  },
  {
    id: 114,
    name: '凉席三件套',
    price: 399,
    image: 'https://picsum.photos/seed/promo14/100/100',
    tag: '舒适'
  },
  {
    id: 115,
    name: '防晒衣',
    price: 229,
    image: 'https://picsum.photos/seed/promo15/100/100',
    tag: '防晒'
  },
  {
    id: 116,
    name: '驱蚊灯',
    price: 89,
    image: 'https://picsum.photos/seed/promo16/100/100',
    tag: '静音'
  },
  {
    id: 117,
    name: '冰丝内裤',
    price: 129,
    image: 'https://picsum.photos/seed/promo17/100/100',
    tag: '透气'
  },
  {
    id: 118,
    name: '运动背心',
    price: 119,
    image: 'https://picsum.photos/seed/promo18/100/100',
    tag: '速干'
  },
  {
    id: 119,
    name: '凉拖鞋',
    price: 69,
    image: 'https://picsum.photos/seed/promo19/100/100',
    tag: '防滑'
  },
  {
    id: 120,
    name: '冰垫坐垫',
    price: 49,
    image: 'https://picsum.photos/seed/promo20/100/100',
    tag: '降温'
  },
  {
    id: 121,
    name: '太阳帽',
    price: 99,
    image: 'https://picsum.photos/seed/promo21/100/100',
    tag: '遮阳'
  },
  {
    id: 122,
    name: '水果冰淇淋机',
    price: 299,
    image: 'https://picsum.photos/seed/promo22/100/100',
    tag: '健康'
  },
  {
    id: 123,
    name: '电蚊香液',
    price: 39,
    image: 'https://picsum.photos/seed/promo23/100/100',
    tag: '无味'
  }
]);

const currentUser = ref(null);
const cartItems = ref(0);
const orders = ref(0);
const selectedProductId = ref(1); // 默认选择第一个商品

// 生成模拟价格历史数据
function generatePriceHistory(productId, basePrice) {
  const history = [];
  const dates = [];
  const currentDate = new Date();
  
  // 生成过去30天的日期和价格
  for (let i = 30; i >= 0; i--) {
    const date = new Date();
    date.setDate(currentDate.getDate() - i);
    dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
    
    // 生成围绕基础价格上下浮动的模拟价格
    const fluctuation = (Math.random() - 0.5) * basePrice * 0.2; // 最多上下浮动20%
    const price = Math.max(100, Math.round((basePrice + fluctuation) * 10) / 10);
    history.push(price);
  }
  
  return {
    dates,
    prices: history
  };
}

// 初始化价格图表
function initPriceChart() {
  if (!Chart) return;
  
  const ctx = document.getElementById('priceChart');
  const product = products.value.find(p => p.id === selectedProductId.value);
  const priceHistory = generatePriceHistory(product.id, product.price);
  
  // 销毁已存在的图表实例
  if (priceChart) {
    priceChart.destroy();
  }
  
  // 创建新图表
  priceChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: priceHistory.dates,
      datasets: [{
        label: `${product.name}`,
        data: priceHistory.prices,
        borderColor: '#42b983',
        backgroundColor: 'rgba(66, 185, 131, 0.1)',
        borderWidth: 2,
        pointRadius: 2,
        pointBackgroundColor: '#42b983',
        tension: 0.3,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        tooltip: {
          mode: 'index',
          intersect: false,
          callbacks: {
            label: function(context) {
              return `价格: ¥${context.parsed.y}`;
            }
          }
        },
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          beginAtZero: false,
          ticks: {
            callback: function(value) {
              return '¥' + value;
            },
            font: {
              size: 10
            }
          },
          grid: {
            color: 'rgba(0, 0, 0, 0.05)'
          }
        },
        x: {
          grid: {
            display: false
          },
          ticks: {
            font: {
              size: 9
            },
            maxRotation: 0,
            autoSkip: true,
            maxTicksLimit: 6
          }
        }
      }
    }
  });
}

// 选择商品并更新图表
function selectProduct(productId) {
  selectedProductId.value = productId;
  initPriceChart();
}


</script>

<style scoped>
/* 整体布局 */
.home-layout {
  display: flex;
  gap: 15px;
  padding: 20px 0 20px 20px;
  flex: 1;
}

/* 左侧促销商品侧边栏 */
.promotions-sidebar {
  width: 320px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 右侧价格走势图侧边栏 */
.price-chart-sidebar {
  width: 1120px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-size: 1.1rem;
  margin: 0 0 15px 0;
  color: #333;
  text-align: center;
}

.chart-product-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.chart-product-option {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.85rem;
  text-align: center;
}

.chart-product-option:hover {
  border-color: #42b983;
  color: #42b983;
}

.chart-product-option.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.mini-chart-container {
  position: relative;
  height: 250px;
  width: 100%;
  flex: 1;
}

/* 主内容区域容器 */
.main-content-wrapper {
  display: flex;
  width: 100%;
}

/* 中间分隔线 */
.home-layout {
  position: relative;
  display: flex;
  flex: 2;
}

/* 在左侧促销区域和主内容区域之间添加竖线 */
.promotions-sidebar {
  position: relative;
}

.promotions-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #e0e0e0;
}

.sidebar-title {
  font-size: 1.1rem;
  padding: 15px;
  margin: 0;
  background-color: #ff6b6b;
  color: white;
  text-align: center;
}

.promotions-scroll {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 10px;
}

.promotion-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 自定义滚动条样式 */
.promotions-scroll::-webkit-scrollbar {
  width: 6px;
}

.promotions-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.promotions-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.promotions-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.promotion-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
  height: 160px;
  justify-content: space-between;
}

.promotion-item:hover {
  background: #f0f0f0;
  transform: translateX(5px);
}

.promotion-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0;
  margin-bottom: 8px;
  border: 1px solid #ddd;
}

.promotion-info {
  flex: 1;
  min-width: 0;
}

.promotion-name {
  font-size: 0.9375rem;
  margin: 0 0 4px 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-price {
  font-size: 0.875rem;
  font-weight: bold;
  color: #ff4d4f;
  margin: 0 0 4px 0;
}

.promotion-tag {
  font-size: 0.75rem;
  color: white;
  background-color: #42b983;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
}

/* 首页容器 */
.home-container {
  flex: 2; /* 增宽一倍 */
  padding: 0 20px;
}

/* 公告栏样式 */
.announcement-bar {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* 醒目的会员中心按钮样式 */
.prominent-membership-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prominent-membership-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
  background: linear-gradient(135deg, #ff5252, #ff7043);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .announcement-bar {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .prominent-membership-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
  }
}

.announcement-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #ffd700;
}

.announcement-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #856404;
}

.announcement-icon {
  font-size: 1.2rem;
}

.announcement-text {
  flex: 1;
  font-weight: 500;
}

/* 轮播图样式 */
.carousel {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  border-radius: 8px;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;}

.carousel-slide.active {
  opacity: 1;
  z-index: 2;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
}

.carousel-caption h2 {
  margin: 0 0 10px 0;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.8s ease-out;
}

.carousel-caption p {
  margin: 0;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.8s ease-out 0.2s both;
}

/* 轮播图指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.carousel-indicators button {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicators button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.carousel-indicators button.active {
  background-color: #42b983;
  width: 30px;
  border-radius: 6px;
}

/* 轮播图控制按钮样式 */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.carousel:hover .carousel-control {
  opacity: 1;
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-control:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 动画效果 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 分类样式 */
.categories {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.category-item:hover {
  transform: translateY(-5px);
}

.category-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* 商品列表样式 */
.products {
  margin-bottom: 40px;
}

/* 品牌展示样式 */
.brands {
  margin-bottom: 40px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.brand-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.brand-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.brand-logo {
  max-width: 80%;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

.brand-name {
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #42b983, transparent);
  transition: left 0.6s ease;
}

.product-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-6px);
}

.product-card:hover::before {
  left: 100%;
}

.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 15px;
}

.product-name {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}

.product-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff4d4f;
  margin-bottom: 15px;
}

.add-to-cart {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart:hover {
  background-color: #35495e;
}



/* 用户信息卡片样式 */
.user-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.user-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, rgba(66, 185, 131, 0.1), rgba(66, 185, 131, 0));
  border-radius: 0 0 0 120px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.user-details p {
  margin: 5px 0;
  color: #666;
}

.profile-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.profile-link:hover {
  background-color: #35495e;
}

.membership-button {
  padding: 8px 16px;
  background-color: #4285f4;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.membership-button:hover {
  background-color: #3367d6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .price-chart-sidebar {
    width: 1000px;
  }
  
  .promotions-sidebar {
    width: 300px;
  }
}

@media (max-width: 1024px) {
  .categories-grid,
  .products-grid,
  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .promotions-sidebar {
    width: 250px;
  }
  
  .promotion-items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .promotion-name {
    font-size: 0.875rem;
  }
  
  .promotion-price {
    font-size: 0.875rem;
  }
  
  .promotion-tag {
    font-size: 0.75rem;
  }
  
  .price-chart-sidebar {
    width: 880px;
  }
  
  .chart-product-option {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .main-content-wrapper {
    flex-direction: column;
  }
  
  .home-layout {
    flex-direction: column;
    padding: 20px;
  }
  
  .promotions-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .promotions-scroll {
    max-height: 300px;
  }
  
  .promotion-items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .promotion-item {
    padding: 8px;
    height: 140px;
  }
  
  .promotion-img {
    height: 70px;
  }
  
  .promotion-name {
    font-size: 0.8125rem;
  }
  
  .promotion-price {
    font-size: 0.8125rem;
  }
  
  .promotion-tag {
    font-size: 0.7rem;
  }
  
  .categories-grid,
  .products-grid,
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .carousel-control {
    opacity: 1;
  }
  
  .carousel-caption h2 {
    font-size: 1.5rem;
  }
  
  .price-chart-sidebar {
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
  }
  
  .mini-chart-container {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .carousel {
    height: 300px;
  }
  
  .categories-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .carousel-caption h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .categories-grid,
  .products-grid,
  .brands-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info {
    flex-direction: column;
    text-align: center;
  }
}
</style>
